<template>
  <div class="report-page">
    <!-- 顶部导航 -->
    <div class="header d-flex align-items-center">
      <router-link to="/students" class="back-button me-3">
        <i class="bi bi-arrow-left"></i>
      </router-link>
      <h5 class="mb-0">学习报告</h5>
    </div>

    <!-- 周报告 -->
    <div class="report-card">
      <div class="week-selector">
        <a href="#" class="week-nav" @click.prevent="prevWeek">
          <i class="bi bi-chevron-left"></i>
        </a>
        <span>第{{ currentWeek }}周学习报告</span>
        <a href="#" class="week-nav" @click.prevent="nextWeek">
          <i class="bi bi-chevron-right"></i>
        </a>
      </div>

      <!-- 本周总结 -->
      <div class="summary-box">
        <div class="summary-title">本周总结</div>
        <div class="summary-content">
          本周累计学习<span class="highlight">{{ totalHours }}</span>小时，
          完成题目<span class="highlight">{{ totalCompletedQuestions }}</span>道
        </div>
      </div>

      <!-- 每日详情 -->
      <div class="daily-list">
        <div v-for="day in dailyData" :key="day.date" class="daily-item">
          <div class="daily-date">
            <div class="daily-day">{{ day.day }}</div>
            <div class="daily-weekday">{{ day.weekday }}</div>
          </div>
          <div class="daily-content">
            <div>
              <span v-for="subject in day.subjects" 
                    :key="subject"
                    :class="['tag', `tag-${subject.type}`]">
                {{ subject.name }}
              </span>
            </div>
            <div class="daily-stats">
              <span class="daily-stat">
                <i class="bi bi-clock me-1"></i>{{ day.duration }}
              </span>
              <span class="daily-stat">
                <i class="bi bi-journal-text me-1"></i>{{ day.questions }}题
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from "@/router/http";

export default {
  name: 'StudyReportViewT',
  data() {
    return {
      currentWeek: 0,
      totalHours: null,
      totalCompletedQuestions: null,
      dailyData: [],
      maxWeek: null,
    }
  },
  mounted() {
    this.userId = this.$route.params.userId;
    this.fetchData();
  },
  methods: {
    prevWeek() {
      if(this.currentWeek === 1){
        return;
      }
      this.currentWeek--;
      this.fetchData();
    },
    nextWeek() {
      if(this.currentWeek === this.maxWeek){
        return;
      }
      this.currentWeek++;
      this.fetchData();
    },
    async fetchData() {
      // this.currentWeek = 1;
      this.totalHours = null;
      this.totalCompletedQuestions = null;
      this.dailyData = [];
        const response = await http.get('/student/statistics/statisticalStudyReport?week='+this.currentWeek+'&userId='+this.userId);
        if (response.status === 200 && response.data.response) {
          const data = response.data.response;
          this.currentWeek = data.currentWeek;
          this.totalHours = data.totalHours;
          this.maxWeek = data.maxWeek;
          this.totalCompletedQuestions = data.totalCompletedQuestions;
          if(data.childList){
            data.childList.forEach(item => {
              this.dailyData.push({
                day: item.dateStr,
                weekday: item.weekday,
                subjects: item.subjectsStudieList.map(subject => {
                  return {
                    name: subject,
                    type: 'primary'
                  };
                }),
                duration: item.hoursSpent,
                questions: item.questionsCompleted
                });
            });
          }
        }

    },

  }
}
</script>

<style scoped>
.report-page {
  background-color: #f5f5f5;
  padding-bottom: 20px;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  background: linear-gradient(135deg, #00b8a9 0%, #28df99 100%);
  color: white;
  padding: 15px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}
.back-button {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
}

.report-card {
  background: white;
  border-radius: 15px;
  margin: 15px;
  padding: 20px;
}

.week-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.week-nav {
  color: #666;
  text-decoration: none;
  font-size: 1.2rem;
}

.summary-box {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
}

.summary-title {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.summary-content {
  font-size: 1.1rem;
  color: #333;
}

.highlight {
  color: #00b8a9;
  font-weight: bold;
}

.daily-list {
  margin-top: 20px;
}

.daily-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.daily-date {
  flex: 1; /* 修改为按比例分配宽度，或者可以根据实际情况设置合适的 flex 值 */
  text-align: left;
}

.daily-day {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

.daily-weekday {
  font-size: 0.8rem;
  color: #666;
}

.daily-content {
  flex: 2;
  margin-left: 0px;
}

.daily-stats {
  display: flex;
  gap: 15px;
  margin-top: 8px;
}

.daily-stat {
  font-size: 0.9rem;
  color: #666;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
  margin-right: 5px;
}

.tag-primary {
  background: rgba(0,184,169,0.1);
  color: #00b8a9;
}

.tag-warning {
  background: rgba(255,164,27,0.1);
  color: #ffa41b;
}
</style> 